<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const currentPath = ref(route.path)
const tabRefs = ref([])

// 当前激活的索引
const activeIndex = computed(() => {
    return navigationOptions.value.findIndex(option => option.value === currentPath.value)
})

// 滑动线的样式
const slideLineStyle = computed(() => {
    if (!tabRefs.value.length || activeIndex.value === -1) return {}

    const activeTab = tabRefs.value[activeIndex.value]
    if (!activeTab) return {}

    return {
        width: `${activeTab.offsetWidth}px`,
        transform: `translateX(${activeTab.offsetLeft}px)`
    }
})

// 计算导航选项
const navigationOptions = computed(() => {
    const currentMatched = route.matched
    if (!currentMatched.length) return []

    let parentRoute = null
    for (let i = currentMatched.length - 1; i >= 0; i--) {
        if (currentMatched[i].children && currentMatched[i].children.length > 0) {
            parentRoute = currentMatched[i]
            break
        }
    }

    if (!parentRoute) return []

    return (parentRoute.children || [])
        .filter(child => child.meta?.title && child.path !== parentRoute.path)
        .map(child => ({
            label: child.meta.title,
            value: child.path.startsWith('/')
                ? child.path
                : `${parentRoute.path}/${child.path}`
        }))
})

// 处理导航变化
const handleNavigation = (path) => {
    router.push(path)
    currentPath.value = path
}

// 监听路由变化更新当前路径
watch(
    () => route.path,
    (newPath) => {
        currentPath.value = newPath
    }
)

// 等待 DOM 渲染完成后更新 refs
watch(navigationOptions, () => {
    nextTick(() => {
        tabRefs.value = tabRefs.value.slice(0, navigationOptions.value.length)
    })
})
</script>

<template>
    <div class="custom-style">
        <!-- 自定义分段器导航区域 -->
        <div class="segmented-container" v-if="navigationOptions.length">
            <div class="custom-tabs">
                <div class="tabs-wrapper">
                    <div v-for="(option, index) in navigationOptions" :key="index" class="tab-item"
                        :class="{ active: currentPath === option.value }" @click="handleNavigation(option.value)"
                        ref="tabRefs">
                        {{ option.label }}
                    </div>
                    <!-- 滑动的下划线 -->
                    <div class="sliding-line" :style="slideLineStyle"></div>
                </div>
            </div>
        </div>

        <!-- 路由视图区域 -->
        <div class="router-view-container">
            <router-view v-slot="{ Component }">
                <keep-alive>
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>
    </div>
</template>

<style scoped>
.custom-style {
    width: 100%;
    height: 100%;
}

.segmented-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6%;
    padding: 2px 0;
}

.router-view-container {
    width: 100%;
    height: 94%;
}

.custom-tabs {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.tabs-wrapper {
    display: flex;
    position: relative;
}

.tab-item {
    padding: 8px 12px;
    text-align: center;
    cursor: pointer;
    color: #666;
    transition: color 0.3s;
    position: relative;
    font-size: 16px;
}

.tab-item.active {
    color: var(--color-normal);
}

.sliding-line {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: var(--color-normal);
    transition: all 0.3s ease-in-out;
}
</style>
